<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="filter-container">
        <el-form inline>
            <el-form-item label="学科">
                <el-select v-model="listQuery.course_type" placeholder="请选择学科">
                  <el-option label="所有" value="" />
                  <el-option v-for="(item, index) in courseTypes" :key="index" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="listQuery.name" placeholder="姓名" class="filter-item" @keyup.enter="getList" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" icon="el-icon-plus" @click="showDialog()">添加教师</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table :data="pageInfo.data" border fit highlight-current-row header-cell-class-name="table-header">
      <el-table-column label="ID" prop="id" min-width="40" />
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="昵称" prop="nickname" />
      <el-table-column label="性别" prop="sex" />
      <el-table-column label="年龄" prop="birthday" />
      <el-table-column label="联系电话" prop="phone" />
      <el-table-column label="所属学科" prop="course_type_text" />
      <el-table-column label="微信ID" prop="wx_id" />
      <el-table-column label="入职时间" prop="join_date" />
      <el-table-column label="基础佣金" prop="commission" />
      <el-table-column label="备注" prop="desc" />
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="showDialog(scope.$index)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination v-show="pageInfo.total > 0" :total="pageInfo.total" :page.sync="pageInfo.current_page" :limit.sync="pageInfo.per_page" @pagination="handlePaginationChange" />

    <!-- 编辑对话框 -->
    <el-dialog :title="dialogTitle" center :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="temp.name" class="w-200" />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="temp.nickname" class="w-200" />
            </el-form-item>
            <el-form-item label="学科">
              <el-select v-model="temp.course_type" class="w-200">
                <el-option label="请选择" value="" />
                <el-option v-for="(item, index) in courseTypes" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="temp.phone" class="w-200" />
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="temp.sex">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日">
              <el-date-picker v-model="temp.birthday" class="w-200" type="date" value-format="yyyy-MM-dd" />
            </el-form-item>
            <el-form-item label="入职日期" prop="join_date">
              <el-date-picker v-model="temp.join_date" class="w-200" type="date" value-format="yyyy-MM-dd" />
            </el-form-item>
            <el-form-item label="基本佣金">
              <el-input v-model="temp.commission" class="w-200" />
            </el-form-item>
            <el-form-item label="照片">
              <UploadImage v-model="temp.img" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="temp.desc" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit()">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import teacherApi from '@/api/teacher' // 修改导入方式
import courseTypeApi from '@/api/course-type' // 修改导入方式
import UploadImage from '../components/UploadImage.vue'

export default {
  name: 'TeacherIndex',
  components: { Pagination, UploadImage },
  filters: {
  },
  data() {
    return {
      courseTypes: [],
      pageInfo: {
        current_page: 1,
        data: [],
        from: 1,
        last_page: 1,
        per_page: 10,
        total: 0
      },
      listQuery: {
        search: ''
      },
      emptyTemp: null,
      temp: {
        id: 0,
        name: '',
        nickname: '',
        sex: '男',
        birthday: '',
        img: '',
        phone: '',
        course_type: '',
        join_date: '',
        desc: ''
      },
      dialogVisible: false,
      dialogTitle: ''
    }
  },
  created() {
    this.emptyTemp = JSON.parse(JSON.stringify(this.temp))
    courseTypeApi.list().then(res => {
      this.courseTypes = res.data
      this.getList()
    })
  },
  methods: {
    getList() {
      teacherApi.page({
        page: this.pageInfo.current_page,
        per_page: this.pageInfo.per_page,
        ...this.listQuery
      }).then(response => {
        const findType = (id) => {
          const type = this.courseTypes.find(item => item.id === id)
          return type ? type.name : ''
        }
        response.data.data.forEach(item => {
          item.course_type_text = findType(item.course_type)
        })
        this.pageInfo = response.data
      })
    },
    handleEdit() {
      if (this.temp.id === 0) {
        // 修改调用方式
        teacherApi.add(this.temp).then(() => {
            this.getList()
            this.dialogVisible = false
            this.$message.success('创建成功')
          })
      } else {
        // 修改调用方式
        teacherApi.edit(this.temp).then(() => {
            this.getList()
            this.dialogVisible = false
          }).catch(() => {})
      }
    },
    resetTemp() {
      this.temp = JSON.parse(JSON.stringify(this.emptyTemp))
    },
    handleDelete(index) {
      this.$confirm('确认删除该教师吗？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        // 修改调用方式
        teacherApi.delete(this.pageInfo.data[index].id).then(() => {
          this.getList()
          this.$message.success('删除成功')
        })
      }).catch(() => {})
    },
    handlePaginationChange(page) {
      this.pageInfo.current_page = page
      this.getList()
    },
    showDialog(index) {
      this.dialogVisible = true
      if (typeof index === 'undefined') {
        this.dialogTitle = '创建教师'
        this.resetTemp()
      } else {
        this.dialogTitle = '更新教师'
        this.temp = this.pageInfo.data[index]
      }
    }
  }
}
</script>
